<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>熊猫优选首页</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <style>
      .swiper-container {
        width: 660px;
        height: 234px;
      }
    </style>
  </head>

  <body>
    <div class="main-box">
      <!-- 头部区域 -->
      <header>
        <div class="wpr">
          <section class="logo">
            <a href="#" title="返回首页">
              <img src="./img/icon.png" alt="" />
              <div class="right">
                <h3>熊猫优选</h3>
                <span>XIONG MAO YOU XUAN</span>
              </div>
            </a>
          </section>
          <section class="wpr_seh">
            <div class="sch">
              <input type="text" placeholder="收索商品，发现跟多优惠" />
              <div class="btn">收索</div>
            </div>
          </section>
          <section class="ate">
            <ul>
              <li>
                <img src="./img/logo1.png" alt="" />
                <span>全程包邮</span>
              </li>
              <li>
                <img src="./img/logo2.png" alt="" />
                <span>7天退货</span>
              </li>
              <li>
                <img src="./img/logo3.png" alt="" />
                <span>品质保证</span>
              </li>
            </ul>
          </section>
        </div>
      </header>
      <!-- 导航栏区域 -->
      <div class="tab">
        <ul>
          <li class="bn">首页</li>
          <li onclick="supplemental2()">9块9包邮</li>
          <li onclick="supplemental3()">超值大额卷</li>
          <li onclick="supplemental4()">夏季女装上新</li>
        </ul>
      </div>
      <!-- 主要内容区域 -->
      <div class="min_box">
        <div class="home">
          <div class="bnr">
            <section class="sieBnr">
              <ul>
                <li>
                  <img src="./img/xt1png.png" alt="" />
                  <p>女装</p>
                  <p><span>/</span>女鞋</p>
                </li>
                <li>
                  <img src="./img/xt2.png" alt="" />
                  <p>男装</p>
                  <p><span>/</span>男鞋</p>
                </li>
                <li>
                  <img src="./img/xt3.png" alt="" />
                  <p>美妆</p>
                  <p><span>/</span>个护</p>
                </li>
                <li>
                  <img src="./img/xt4.png" alt="" />
                  <p>配饰</p>
                  <p><span>/</span>箱包</p>
                </li>
                <li>
                  <img src="./img/xt5.png" alt="" />
                  <p>零食王国</p>
                </li>
                <li>
                  <img src="./img/xt6.png" alt="" />
                  <p>母婴用品</p>
                </li>
                <li>
                  <img src="./img/xt7.png" alt="" />
                  <p>手机</p>
                  <p><span>/</span>数码</p>
                </li>
                <li>
                  <img src="./img/xt8.png" alt="" />
                  <p>内衣袜子</p>
                </li>
                <li>
                  <img src="./img/xt9.png" alt="" />
                  <p>女装</p>
                  <p><span>/</span>家居</p>
                </li>
              </ul>
            </section>
            <section class="sieBnr_a">
              <div class="banTop">
                <div class="slides">
                  <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="./img/lunbo.jpeg" alt="" />
                      </div>
                      <div class="swiper-slide">
                        <img src="./img/lunbo.jpeg" alt="" />
                      </div>
                      <div class="swiper-slide">
                        <img src="./img/lunbo.jpeg" alt="" />
                      </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->

                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                  </div>
                </div>
                <div class="banTop-b">
                  <h3>9块9包邮</h3>
                  <div class="pmt">保你不吃亏</div>
                  <img src="./img/qg.gif" alt="" />
                </div>
              </div>
              <div class="banBtm">
                <div class="btmScl" onclick="supplemental3()">
                  <h3>夏季女装上新</h3>
                  <p>速来抢购</p>
                  <span class="btnGo">Go</span>
                  <img src="./img/daohang1.png" alt="" />
                </div>
                <div class="btmScl" onclick="supplemental4()">
                  <h3>超值大额卷</h3>
                  <p>优惠直击低价</p>
                  <span class="btnGo">Go</span>
                  <img src="./img/daohang.png" alt="" />
                </div>
                <a href="#" class="btmApp">
                  <p>扫码下载</p>
                  <p>发现更多惊喜</p>
                  <img src="./img/ewm.png" alt="下载码" />
                </a>
              </div>
            </section>
          </div>
          <div class="bar">
            <h3>小编精选</h3>
            <p class="bar-p">每天更新</p>
          </div>
          <!-- 商品数据渲染 -->
          <section class="cie">
            <ul class="cie_a1">
              <!-- <li class="cie_a1-a">
                            <img src="./img/O1CN012kA7F61iSHjN3NXoQ_!!0-item_pic.jpg" alt="">
                            <div class="cie-a">
                                <div class="cie-a-a">粉底液遮瑕保湿持久</div>
                                <div class="cie-a-b">
                                    <span class="cie-aa">天猫</span>
                                    <span class="cie-ab">大额卷</span>
                                    <span class="cie-ac">包邮</span>
                                </div>
                                <div class="cie-a-c">
                                    <div class="left">
                                        <span class="cie-pic">
                                            <span class="cie-ba">￥</span>
                                            <span class="cie-bb">8</span>
                                            <span class="ice-bc">.9</span>
                                        </span>
                                        <span class="cie-num">3.3万人已买</span>
                                        <span class="cie-val">50元卷</span>
                                    </div>

                                </div>
                            </div>
                        </li> -->
              <script type="text/html" id="productList">
                {{each productList}}
                <li class="cie_a1-a" onclick="addCart({{$value.id}})">
                  <img src="{{$value.image}}" alt="" />
                  <div class="cie-a">
                    <div class="cie-a-a">{{$value.title}}</div>
                    <div class="cie-a-b">
                      <span class="cie-aa">天猫</span>
                      <!-- <span class="cie-ab">大额卷</span> -->
                      <span class="cie-ac">包邮</span>
                    </div>
                    <div class="cie-a-c">
                      <div class="left">
                        <span class="cie-pic">
                          <span class="cie-ba">￥</span>
                          <span class="cie-bb">{{$value.price}}</span>
                          <!-- <span class="ice-bc">{{$value.price}}</span> -->
                        </span>
                        <span class="cie-num">{{$value.saleNum}}万人已买</span>
                        <span class="cie-val">{{$value.couponValue}}</span>
                      </div>
                    </div>
                  </div>
                </li>
                {{/each}}
              </script>
            </ul>
            <div class="cie-more">
              <div class="cie-more-btn" onclick="onView()">查看更多</div>
            </div>
          </section>
        </div>
      </div>
      <!-- 返回顶部区域 -->
      <div class="D-top" onclick="onBack()">
        <img src="./img/top.png" alt="" />
      </div>
      <!-- 页脚 -->
      <footer>
        <div class="ctr">
          <img src="./img/icon.png" alt="" />
          <div class="ctr-a">
            <h1>熊猫优选</h1>
            <p class="sgn">
              年轻人网购首选
              <br />
              购物领卷更省钱
            </p>
          </div>
          <div class="ctr-b">
            <p class="me">
              <span>|</span>
              <a href="#">下载App</a>
            </p>
          </div>
          <div class="ctr-c">
            <img src="./img/policeIcon.png" alt="" />
            <p class="ms">
              <span>浙公安网备案 33010602009949号 | </span>
              ICP备案号：
              <a href="#">ICP备案号: 浙ICP备17012864号-1</a>
              |
            </p>
            <img src="./img/license.png" alt="" />
            <p class="ms">证照信息</p>
          </div>
        </div>
      </footer>
      <div class="fter">
        <img src="./img/aqkx_83x30.png" alt="" />
      </div>
    </div>
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/index.js"></script>
    <script>
      var mySwiper = new Swiper(".swiper-container", {
        autoplay: true,
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        // 如果需要滚动条
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
    <script type="text/html" id="prot">
      {{each cert}}
      <li class="cie_a1-a" onclick="addCart({{$value.id}})">
        <img src="{{$value.image}}" alt="" />
        <div class="cie-a">
          <div class="cie-a-a">{{$value.title}}</div>
          <div class="cie-a-b">
            <span class="cie-aa">天猫</span>
            <!-- <span class="cie-ab">大额卷</span> -->
            <span class="cie-ac">包邮</span>
          </div>
          <div class="cie-a-c">
            <div class="left">
              <span class="cie-pic">
                <span class="cie-ba">￥</span>
                <span class="cie-bb">{{$value.price}}</span>
                <!-- <span class="ice-bc">{{$value.price}}</span> -->
              </span>
              <span class="cie-num">{{$value.saleNum}}万人已买</span>
              <span class="cie-val">{{$value.couponValue}}</span>
            </div>
          </div>
        </div>
      </li>
      {{/each}}
    </script>
  </body>
</html>
